<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>打印模版</title>
  <style>
    body,
    html {
      padding: 0px;
      margin: 0px;
    }

    @page {
      margin: 10px;
    }

    .lr {
      text-align: right;
    }

    .lf {
      text-align: left
    }

    .lc {
      text-align: center;
    }

    .circle {
      border-radius: 100%;
      display: inline-block;
      height: 60px;
      width: 60px;
      font-size: 32px;
      text-align: center;
      line-height: 60px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div id="print" ></div>
</body>
<script>
  function gettotal(obj) {
    return `
      <table align='right' style="width:100%">
        <tr>
          <td class="lr" style="padding-right:10px">
            检测单号:${obj.checkNo}
          </td>
        </tr>
        <tr>
          <td class="lr" style="padding-right:10px">
            流程单号:${obj.companyScc}
          </td>
        </tr>
        <tr>
          <td class="lr" style="padding-right:10px">${obj.companyName}</td>
        </tr>
      </table>
      <table align='left' style="width:100%; margin-bottom: 15px;">
        <tr>
          <td class="lf" style="width:150px;padding-left:10px">
            <div class="circle">100</div>
          </td>
          <td style="font-size: 36px;">发现${obj.errorQty}项问题，${obj.warnQty}项警告</td>
        </tr>
      </table>
    `
  }

  function getwrapHtml (title, str) {
    return `
      <table style="border-top:1px solid #000; width:100%;padding-top: 10px;padding-bottom: 10px;min-height: 150px;">
        <tr>
          <td style="font-size: 28px;font-weight: bold; width:150px;vertical-align:top;">${title}</td>
          <td style="vertical-align:top;">
             ${str}
          </td>
        </tr>
      </table>
    `
  }

  function getChildHtml (arr) {
    var html = `<table border="1" style="width:100%;border-collapse:collapse">`;
    html += `<thead><tr><td>检测项目</td><td>通过情况</td><td>检测项目</td><td>通过情况</td></tr></thead>`
    html += '<tbody>'
    for (var i = 0; i< arr.length; i += 2) {
      html += `
        <tr>
          <td>${arr[i].detailProjectName}</td><td>${arr[i].resultDesc}</td>
          <td>${arr[i+1] ? arr[i+1].detailProjectName : ''}</td><td>${arr[i+1] ? arr[i+1].resultDesc : ''}</td>
          </tr>
      `
    }
    html += '</tbody>'
    html += `</table>`
    return html
  }

  function getlistData(data) {
    var errorstr = '',errno = 0
    var warnstr = '',warnno = 0
    var daistr = '',daino = 0
    var sucstr = ''
    var sucArr = []
    var deststr = ''

    data.map(item => {
      if(item.checkResult == 4) {
        errno++
        errorstr += `<div>${errno}.${item.detailProjectName}：${item.resultDesc}</div>`
      } else if(item.checkResult == 3) {
        warnno++
        warnstr += `<div>${warnno}.${item.detailProjectName}：${item.resultDesc}</div>`
      } else if(item.checkResult == 2) {
        daino++
        daistr += `<div>${daino}.${item.detailProjectName}：${item.resultDesc}</div>`
      } else {
        sucArr.push(item)
        //  sucstr += `<span>${item.detailProjectName}：${item.resultDesc}</span>   `
      }
    })
    if(!!errorstr) {
      deststr += this.getwrapHtml('问题报告', errorstr)
    }
    if(!!warnstr){
      deststr += this.getwrapHtml('警告说明', warnstr)
    }
    if(!!daistr){
      deststr += this.getwrapHtml('待定情况', daistr)
    }
    if(sucArr.length) {
      deststr += this.getwrapHtml('通过情况', getChildHtml(sucArr))
    }
    return deststr
  }

  const { ipcRenderer } = require('electron');
  ipcRenderer.on('webview-print-render', (e, data) => {
    const _dest = data.data
    document.getElementById('print').innerHTML = gettotal(_dest.head) + getlistData(_dest.list)
    ipcRenderer.sendToHost('webview-print-do');
    // 告诉打印机，我这边渲染的内容已经好了，可以打印了
  });
</script>

</html>